<template>
	<view class="home-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="app-title">
				心灵空间
				<uni-icons type="star" size="12" color="#f0ad4e" class="title-star"></uni-icons>
			</view>
			<view class="right-actions">
				<view class="mood-capsule" @click="showMoodPopup">
					<uni-icons custom-prefix="iconfont" :type="mood" size="30"></uni-icons>
					<text class="mood-text">记心情</text>
					<uni-icons type="sparkles" size="14" color="#f0ad4e" class="mood-sparkle"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 装饰星星（固定定位，漂浮效果） -->
		<view class="floating-stars">
			<uni-icons type="star" size="10" color="#4a90e2" class="float-star star-1"></uni-icons>
			<uni-icons type="star" size="8" color="#f0ad4e" class="float-star star-2"></uni-icons>
			<uni-icons type="star" size="12" color="#5cb85c" class="float-star star-3"></uni-icons>
			<uni-icons type="star" size="6" color="#d9534f" class="float-star star-4"></uni-icons>
			<uni-icons type="star" size="9" color="#722ed1" class="float-star star-5"></uni-icons>
		</view>

		<!-- 情绪选择弹窗 -->
		<uni-popup ref="moodPopup" type="bottom">
			<view class="mood-popup">
				<view class="popup-title">
					选择此刻心情
					<uni-icons type="heart" size="16" color="#f0ad4e"></uni-icons>
				</view>
				<view class="mood-options">
					<view class="mood-item" @click="recordMood('icon-smile')">
						<view class="mood-icon-wrapper">
							<uni-icons custom-prefix="iconfont" type="icon-smile" size="30"></uni-icons>
							<uni-icons type="star" size="10" color="#4a90e2" class="item-star"></uni-icons>
						</view>
						<text>平静</text>
					</view>
					<view class="mood-item" @click="recordMood('icon-worried-face')">
						<view class="mood-icon-wrapper">
							<uni-icons custom-prefix="iconfont" type="icon-worried-face" size="30"></uni-icons>
							<uni-icons type="star" size="10" color="#f0ad4e" class="item-star"></uni-icons>
						</view>
						<text>焦虑</text>
					</view>
					<view class="mood-item" @click="recordMood('icon-grin')">
						<view class="mood-icon-wrapper">
							<uni-icons custom-prefix="iconfont" type="icon-grin" size="30"></uni-icons>
							<uni-icons type="star" size="10" color="#5cb85c" class="item-star"></uni-icons>
						</view>
						<text>开心</text>
					</view>
					<view class="mood-item" @click="recordMood('icon-tired')">
						<view class="mood-icon-wrapper">
							<uni-icons custom-prefix="iconfont" type="icon-tired" size="30"></uni-icons>
							<uni-icons type="star" size="10" color="#d9534f" class="item-star"></uni-icons>
						</view>
						<text>疲惫</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-text">
				<text class="greeting">你好，朋友</text>
				<text class="message">今天想探索些什么？</text>
				<view class="welcome-decor">
					<uni-icons type="star" size="10" color="#4a90e2"></uni-icons>
					<uni-icons type="star" size="8" color="#f0ad4e"></uni-icons>
					<uni-icons type="star" size="6" color="#5cb85c"></uni-icons>
				</view>
			</view>
			<view class="welcome-illustration">
				<view class="illustration-icon">
					<uni-icons type="heart" size="40" color="#4a90e2" class="main-heart"></uni-icons>
					<uni-icons type="star" size="20" color="#f0ad4e" class="star-1"></uni-icons>
					<uni-icons type="star" size="16" color="#5cb85c" class="star-2"></uni-icons>
					<uni-icons type="star" size="18" color="#d9534f" class="star-3"></uni-icons>
					<uni-icons type="circle" size="6" color="#722ed1" class="dot-1"></uni-icons>
					<uni-icons type="circle" size="4" color="#4a90e2" class="dot-2"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 核心功能区 -->
		<view class="features-section">
			<view class="section-title">
				核心功能
				<uni-icons type="star" size="14" color="#4a90e2"></uni-icons>
			</view>

			<view class="features-grid">
				<!-- 测评问卷入口 -->
				<view class="feature-card" @click="goTest" hover-class="feature-card-active">
					<view class="feature-icon assessment-icon">
						<uni-icons custom-prefix="iconfont" type="icon-Clipboard" size="30"></uni-icons>
						<uni-icons type="star" size="10" color="#4a90e2" class="feature-inner-star"></uni-icons>
					</view>
					<view class="feature-name">心理测评</view>
					<view class="feature-desc">专业问卷评估</view>
				</view>

				<!-- 心理文章入口 -->
				<view class="feature-card" @click="goArticle" hover-class="feature-card-active">
					<view class="feature-icon article-icon">
						<uni-icons custom-prefix="iconfont" type="icon-book" size="30"></uni-icons>
						<uni-icons type="star" size="10" color="#5cb85c" class="feature-inner-star"></uni-icons>
					</view>
					<view class="feature-name">心理文章</view>
					<view class="feature-desc">专业知识分享</view>
				</view>

				<!-- 推荐游戏入口 -->
				<view class="feature-card" @click="goGame" hover-class="feature-card-active">
					<view class="feature-icon game-icon">
						<uni-icons custom-prefix="iconfont" type="icon-game" size="30"></uni-icons>
						<uni-icons type="star" size="10" color="#f0ad4e" class="feature-inner-star"></uni-icons>
					</view>
					<view class="feature-name">放松游戏</view>
					<view class="feature-desc">缓解压力情绪</view>
				</view>
			</view>
		</view>

		<!-- 推荐内容区 -->
		<view class="recommendations-section">
			<view class="section-header">
				<view class="section-title">
					为你推荐
					<uni-icons type="star" size="12" color="#f0ad4e"></uni-icons>
				</view>
				<view class="see-all" @click="gotoAllRecommendations">
					查看全部
					<uni-icons type="right" size="12" color="#4a90e2"></uni-icons>
				</view>
			</view>

			<view class="recommendations-list">
				<!-- 推荐测评 -->
				<view class="recommendation-item" @click="gotoAssessmentDetail('anxiety')">
					<view class="item-icon">
						<uni-icons type="heart" size="26" color="#d9534f"></uni-icons>
						<uni-icons type="circle" size="6" color="#d9534f" class="item-dot"></uni-icons>
					</view>
					<view class="item-content">
						<view class="item-title">焦虑情绪测评</view>
						<view class="item-desc">了解你的焦虑水平和应对方式</view>
					</view>
					<view class="item-arrow">
						<uni-icons type="right" size="18" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 推荐文章 -->
				<view class="recommendation-item" @click="gotoArticleDetail('mindfulness')">
					<view class="item-icon">
						<uni-icons custom-prefix="iconfont" type="icon-lightbulb" size="30"></uni-icons>
						<uni-icons type="star" size="8" color="#5bc0de" class="item-dot"></uni-icons>
					</view>
					<view class="item-content">
						<view class="item-title">正念冥想入门指南</view>
						<view class="item-desc">5分钟开始你的正念练习</view>
					</view>
					<view class="item-arrow">
						<uni-icons type="right" size="18" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 推荐游戏 -->
				<view class="recommendation-item" @click="gotoGameDetail('breathing')">
					<view class="item-icon">
						<uni-icons custom-prefix="iconfont" type="icon-breathe" size="30"></uni-icons>
						<uni-icons type="circle" size="6" color="#f0ad4e" class="item-dot"></uni-icons>
					</view>
					<view class="item-content">
						<view class="item-title">呼吸放松训练</view>
						<view class="item-desc">通过呼吸调节缓解压力</view>
					</view>
					<view class="item-arrow">
						<uni-icons type="right" size="18" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部引导 -->
		<view class="bottom-guide">
			<text>心灵空间始终陪伴着你</text>
			<view class="guide-stars">
				<uni-icons type="star" size="8" color="#4a90e2"></uni-icons>
				<uni-icons type="star" size="6" color="#f0ad4e"></uni-icons>
				<uni-icons type="star" size="8" color="#5cb85c"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			mood: 'icon-smile',
		};
	},
	mounted() {
		uni.setStorageSync('mood', 'icon-smile')
	},

	methods: {
		showMoodPopup() {
			this.$refs.moodPopup.open()
		},
		recordMood(type){
			this.mood = type
			uni.setStorageSync('mood', type)
			this.$refs.moodPopup.close()
			// 显示记录成功提示
			uni.showToast({
				title: '已记录今日心情',
				icon: 'none',
				duration: 1500
			})
		},
		gotoPersonal() {
			uni.navigateTo({
				url: '/pages/mine/index'
			});
		},
		goTest() {
			uni.navigateTo({
				url: '../../creativityPackage/pages/creativity/testList'
			});
		},
		goArticle() {
			uni.switchTab({
				url: '../content/index'
			});
		},
		goGame() {
			uni.switchTab({
				url: '../games/game'
			});
		},
		gotoAllRecommendations() {
			uni.showToast({
				title: '全部推荐',
				icon: 'none'
			});
		},
		gotoAssessmentDetail(type) {
			uni.navigateTo({
				url: `/pages/assessment/detail?type=${type}`
			});
		},
		gotoArticleDetail(id) {
			uni.navigateTo({
				url: `/pages/articles/detail?id=${id}`
			});
		},
		gotoGameDetail(id) {
			uni.navigateTo({
				url: `/pages/games/detail?id=${id}`
			});
		},
	}
};
</script>

<style scoped lang="scss">
// 新增漂浮星星样式
.floating-stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; // 不影响点击交互
	z-index: 1;
}

.float-star {
	position: absolute;
	opacity: 0.6;
	animation: float 8s ease-in-out infinite;
}

.star-1 { top: 15%; left: 20%; animation-delay: 0s; }
.star-2 { top: 60%; left: 80%; animation-delay: 1s; }
.star-3 { top: 30%; left: 70%; animation-delay: 2s; }
.star-4 { top: 80%; left: 30%; animation-delay: 3s; }
.star-5 { top: 45%; left: 10%; animation-delay: 1.5s; }

// 导航栏美化
.navbar {
	.app-title {
		position: relative;
		padding-right: 16px;
		
		.title-star {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			animation: twinkle 2s ease-in-out infinite;
		}
	}

	.mood-capsule {
		position: relative;
		
		.mood-sparkle {
			position: absolute;
			top: -5px;
			right: 5px;
			animation: spin 3s linear infinite;
		}
	}
}

// 心情选择弹窗美化
.mood-popup {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	
	.mood-item {
		.mood-icon-wrapper {
			position: relative;
			margin-bottom: 8px;
			
			.item-star {
				position: absolute;
				bottom: 0;
				right: 0;
				animation: twinkle 2s ease-in-out infinite;
			}
		}
	}
}

// 欢迎区域美化
.welcome-section {
	.welcome-text {
		position: relative;
		
		.welcome-decor {
			display: flex;
			gap: 6px;
			margin-top: 12px;
		}
	}
	
	.welcome-illustration {
		.illustration-icon {
			.main-heart {
				animation: pulse 3s ease-in-out infinite;
			}
			
			.dot-1 {
				position: absolute;
				top: 30%;
				left: 30%;
				animation: float 6s ease-in-out infinite;
			}
			
			.dot-2 {
				position: absolute;
				bottom: 20%;
				right: 25%;
				animation: float 5s ease-in-out infinite 1s;
			}
		}
	}
}

// 功能区美化
.features-section {
	.section-title {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	
	.feature-card {
		.feature-icon {
			position: relative;
			
			.feature-inner-star {
				position: absolute;
				top: 10px;
				right: 10px;
				animation: float 4s ease-in-out infinite;
			}
		}
	}
}

// 推荐区美化
.recommendations-section {
	.section-header {
		.section-title {
			display: flex;
			align-items: center;
			gap: 6px;
		}
		
		.see-all {
			display: flex;
			align-items: center;
			gap: 4px;
		}
	}
	
	.recommendation-item {
		.item-icon {
			position: relative;
			
			.item-dot {
				position: absolute;
				bottom: 5px;
				right: 5px;
				animation: pulse 2s ease-in-out infinite;
			}
		}
	}
}

// 底部引导美化
.bottom-guide {
	position: relative;
	padding: 20px 16px;
	
	.guide-stars {
		display: flex;
		gap: 6px;
		justify-content: center;
		margin-top: 8px;
	}
}

// 新增动画
@keyframes twinkle {
	0%, 100% { opacity: 0.5; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

// 原有样式保持不变
.right-actions {
	display: flex;
	align-items: center;
}
.mood-capsule {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background-color: rgba(240, 173, 78, 0.1);
  border-radius: 20px;
  transition: all 0.2s;
}
.mood-capsule:active {
  background-color: rgba(240, 173, 78, 0.2);
}
.mood-text {
  font-size: 14px;
  color: #f0ad4e;
  font-weight: 500;
}

/* 弹窗样式 */
.mood-popup {
	padding: 20px;
	background-color: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.mood-options {
	display: flex;
	justify-content: space-around;
	margin-top: 16px;
}

.mood-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}


.home-page {
	background-color: #f7f9fc;
	min-height: 100vh;
	padding-bottom: 50px;
}


.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

	.app-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.user-avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #f0f7ff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
}


.welcome-section {
	display: flex;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #e6f2ff 0%, #f0f7ff 100%);
	border-radius: 16px;
	margin: 16px;
	box-shadow: 0 4px 15px rgba(74, 144, 226, 0.1);

	.welcome-text {
		flex: 1;
		padding-right: 16px;

		.greeting {
			font-size: 22px;
			font-weight: 600;
			color: #333;
			display: block;
			margin-bottom: 8px;
		}

		.message {
			font-size: 15px;
			color: #666;
			line-height: 1.5;
		}
	}

	.welcome-illustration {
		width: 120px;
		height: 120px;

		.illustration-icon {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.star-1 {
				position: absolute;
				top: 20%;
				right: 20%;
				animation: float 3s ease-in-out infinite;
			}

			.star-2 {
				position: absolute;
				bottom: 25%;
				left: 15%;
				animation: float 4s ease-in-out infinite 0.5s;
			}

			.star-3 {
				position: absolute;
				top: 60%;
				right: 10%;
				animation: float 3.5s ease-in-out infinite 1s;
			}
		}
	}
}


.features-section {
	padding: 0 16px 16px;

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin-bottom: 16px;
		padding-left: 4px;
	}

	.features-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
	}

	.feature-card {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;

		.feature-icon {
			width: 64px;
			height: 64px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12px;
		}

		.assessment-icon {
			background-color: rgba(74, 144, 226, 0.1);
		}

		.article-icon {
			background-color: rgba(92, 184, 92, 0.1);
		}

		.game-icon {
			background-color: rgba(240, 173, 78, 0.1);
		}

		.feature-name {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}

		.feature-desc {
			font-size: 12px;
			color: #999;
		}
	}

	.feature-card-active {
		transform: translateY(-5px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	}
}


.recommendations-section {
	padding: 0 16px 20px;

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;

		.see-all {
			font-size: 14px;
			color: #4a90e2;
		}
	}

	.recommendations-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.recommendation-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12px;
		padding: 14px 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: background-color 0.2s ease;

		&:active {
			background-color: #f9f9f9;
		}

		.item-icon {
			width: 44px;
			height: 44px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(74, 144, 226, 0.1);
		}

		.item-content {
			flex: 1;
			margin: 0 16px;

			.item-title {
				font-size: 16px;
				color: #333;
				margin-bottom: 4px;
			}

			.item-desc {
				font-size: 12px;
				color: #999;
			}
		}
	}
}


.bottom-guide {
	text-align: center;
	font-size: 14px;
	color: #666;
	margin-top: 20px;
}


@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.welcome-section,
.feature-card,
.recommendation-item {
	animation: fadeIn 0.5s ease forwards;
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }

.recommendation-item:nth-child(1) { animation-delay: 0.4s; }
.recommendation-item:nth-child(2) { animation-delay: 0.5s; }
.recommendation-item:nth-child(3) { animation-delay: 0.6s; }
</style>